<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="utf-8">
    <style>
    *{
      margin: 0; 
      padding: 0; 
    } 
    body{
      background-color: #CAE1FF;
    }
    .box {
      margin: 50px auto 0 auto;
      width: 400px;
      height: auto;
      border: solid 1px #222;
    } 
    #cont { 
      width: 400px;
      height: 600px; 
      position: relative;
      overflow: hidden;
      }
    #go {
      width: 100%;
      height: 600px;
      position: absolute;
      top: 0;
      font: 700 60px '微软雅黑';
      text-align: center; 
      z-index: 99;
    }
    #go span {
      width: 100%;
      cursor: pointer;
      background-color: #bbb;
    }
    #main {
      width: 400px;
      height: 600px;
      position: relative;
      top: -150px;
    }
    .row {
      width: 400px;
      height: 150px;
    }
    .row div {
      width: 99px;
      height: 149px;
      border: solid 1px #222;
      float: left;
      border-top-width: 0;
      border-left-width: 0;
      cursor: pointer;
    }
    #count {
      border-top: solid 1px #222;
      width: 400px;
      height: 50px;
      font: 700 36px/50px '微软雅黑';
      text-align: center;
      color:red;
    }
    #bgm{
      width: 400px;
      height: 50px;
      margin-top: -50px;
      position: absolute;
      visibility: hidden;
    }
	.logo{margin: 0 auto;width: 250px;margin-top:10px;}
      </style>
 </head>
 <script type="text/javascript" src="index.js"></script>
 <body>
    <div class="logo"><img src="1.jpg"></div>
    <div class="box">
      <audio src="sun.mp3" id="bgm" controls loop></audio>
      <div id="cont"> 
        <div id="go">
          <span>开始</span> 
        </div> 
          <div id="main"></div>
      </div> 
          <div id="count"></div>
    </div>

</body> 

</html>	